/* $header
 ------------------------------------------*/

.main-panel > .header {
  width: 100%;
  height: @header-height;
  z-index: @zindex-header;
  border: 0;
  margin: 0;
  .rounded(0);
  .box-shadow(0 0 1px rgba(0, 0, 0, 0.1));
  /* Element alignments */
  .navbar-text {
    .header-vertical-align(19px);
    margin-right: @padding-base;
    margin-left: @padding-base;
  }
  .navbar-btn {
    .header-vertical-align(34px);
  }
  .btn-lg.navbar-btn {
    .header-vertical-align(45px);
  }
  .btn-sm.navbar-btn {
    .header-vertical-align(30px);
  }
  .btn-xs.navbar-btn {
    .header-vertical-align(22px);
  }
  .navbar-nav {
    margin: 0;
    > li > a {
      .header-vertical-align-padding(19px);
      max-height: @header-height;
    }
    .dropdown-menu {
      margin-top: 1px;
      padding: 0;
      border-color: fade(black, 10%);
      border-top: 0;
      background-color: white;
      .box-shadow(0 6px 12px fade(black, 10%));
      .rounded(0);
    }
  }
  .nav > li > a:hover,
  .nav > li > a:focus {
    background-color: transparent;
  }
  .nav .open > a,
  .nav .open > a:hover,
  .nav .open > a:focus {
    background-color: transparent;
  }
  .notifications {
    min-width: 300px;
    .notifications-header, .notifications-footer {
      padding: 0 @padding-base;
    }
    .notifications-header {
      padding-top: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid @border-color;
      p {
        margin: 0;
      }
    }
    .notifications-footer {
      padding-top: 5px;
      padding-bottom: 5px;
      border-bottom-left-radius: @border-radius-base;
      border-bottom-right-radius: @border-radius-base;
    }
    li a {
      font-size: @font-size-base;
      padding: 0;
    }
    .time {
      display: block;
      font-size: 12px;
    }
    a:hover,
    a:active {
      color: darken(@text-color, 5%);
      background-color: transparent;
    }
    .notifications-list {
      list-style: none;
      padding: 0;
      li {
        border-bottom: 1px solid @border-color;
      }
      li a {
        position: relative;
        display: block;
        padding: @padding-base;
      }
    }
  }
  .circle-icon {
    position: relative;
    display: table;
    margin: 0;
    float: left;
    color: #fff;
    text-align: center;
    font-size: 20px;
    line-height: 50px;
    .square(32px);
    .rounded(100%);
    > i {
      display: table-cell;
      float: none;
      width: 100%;
      height: 100%;
      vertical-align: middle;
      font-size: 12px
    }
  }
  a > i.fa {
    font-size: 14px;
  }
  .header-avatar {
    width: 32px;
    margin-top: -6px;
  }
}

@media screen and (min-width: @screen-sm-min) {
  .header {
    position: relative;
    width: 100%;
    .navbar-form {
      .header-vertical-align(34px);
    }
  }
  .navbar-nav.navbar-right:last-child {
    margin-right: 0;
  }
  .main-panel > header .dropdown-menu {
    padding: 0;
  }
}

@media (max-width: @screen-xs-max) {
  .main-panel > .header {
    width: 100%;
    .navbar-nav .open .dropdown-menu {
      position: absolute;
      left: auto;
      right: 0;
    }
    > .navbar-nav {
      float: left;
    }
    > .navbar-right {
      float: right;
    }
    > .nav > li {
      float: left;
    }
  }
}

/* default header skin */
.header-variant(@header-skin-background; @header-skin-hover-background; @header-skin-color; @header-skin-hover);

